<script setup>
import { Close } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
const emits = defineEmits(['closeEvent'])
const props = defineProps(['orderDetailInfo'])
const activeIndex = ref(0)
watch(
  () => props.orderDetailInfo.orderId,
  () => {
    activeIndex.value = 0
  }
)
</script>

<template>
  <div class="order-detail-drawer">
    <div class="order-detail-drawer-header">
      <div class="order-detail-drawer-title">订单详情</div>
      <el-icon size="20" @click="emits('closeEvent')"><Close /></el-icon>
    </div>
    <el-divider></el-divider>
    <div class="order-type-and-number">
      <img v-if="orderDetailInfo.orderType === 0" alt="" src="@/assets/普通订单.svg" />
      <img v-if="orderDetailInfo.orderType === 1" alt="" src="@/assets/秒杀订单.svg" />
      <div class="order-info-container">
        <div>
          <span v-if="orderDetailInfo.orderType === 0">普通订单</span>
          <span v-if="orderDetailInfo.orderType === 1">秒杀订单</span>
        </div>
        <div>订单号：{{ orderDetailInfo.orderNumber }}</div>
      </div>
    </div>
    <div class="order-status">
      <div class="order-status-item">
        <div class="order-status-item-key">订单状态</div>
        <div class="order-status-item-value">
          <template v-if="orderDetailInfo.orderStatus === 0">待付款</template>
          <template v-if="orderDetailInfo.orderStatus === 1">待发货</template>
          <template v-if="orderDetailInfo.orderStatus === 2">待收货</template>
          <template v-if="orderDetailInfo.orderStatus === 3">已完成</template>
          <template v-if="orderDetailInfo.orderStatus === 4">已取消</template>
        </div>
      </div>
      <div class="order-status-item">
        <div class="order-status-item-key">实际支付</div>
        <div class="order-status-item-value">￥{{ orderDetailInfo.actualPayment }}</div>
      </div>
      <div class="order-status-item">
        <div class="order-status-item-key">支付方式</div>
        <div class="order-status-item-value">
          <template v-if="orderDetailInfo.paymentMethod === 0">微信支付</template>
          <template v-if="orderDetailInfo.paymentMethod === 1">余额支付</template>
        </div>
      </div>
      <div class="order-status-item">
        <div class="order-status-item-key">支付时间</div>
        <div class="order-status-item-value">
          {{ orderDetailInfo.payTime ? orderDetailInfo.payTime : '-' }}
        </div>
      </div>
    </div>
    <el-tabs v-model="activeIndex" style="border-bottom: none" type="border-card">
      <el-tab-pane :name="0" label="订单信息">
        <el-scrollbar>
          <el-descriptions title="用户信息">
            <el-descriptions-item label="用户名称:">
              {{ orderDetailInfo.userName }}
            </el-descriptions-item>
            <el-descriptions-item label="绑定电话:">
              {{ orderDetailInfo.bindingPhoneNumber }}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <el-descriptions style="padding-top: 12px" title="收货信息">
            <el-descriptions-item label="收货人:">
              {{ orderDetailInfo.receiverName }}
            </el-descriptions-item>
            <el-descriptions-item label="收货电话:">
              {{ orderDetailInfo.receiverPhoneNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="收货地址:">
              {{ orderDetailInfo.deliveryAddress }}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <el-descriptions style="padding-top: 12px" title="订单信息">
            <el-descriptions-item label="创建时间:">
              {{ orderDetailInfo.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="商品总数:">
              {{ orderDetailInfo.totalNumberOfProducts }}
            </el-descriptions-item>
            <el-descriptions-item label="商品总价:">
              {{ orderDetailInfo.totalAmount }}
            </el-descriptions-item>
            <el-descriptions-item label="实际支付:">
              {{ orderDetailInfo.actualPayment }}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <el-descriptions style="padding-top: 12px" title="买家留言">
            <el-descriptions-item>
              {{ orderDetailInfo.customerNote || '-' }}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <el-descriptions style="padding-top: 12px" title="订单备注">
            <el-descriptions-item>
              {{ orderDetailInfo.merchantNote || '-' }}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane :name="1" label="商品信息">
        <el-table :data="orderDetailInfo.orderDetailList" max-height="500" style="width: 100%">
          <el-table-column label="商品信息" prop="orderDetailId" width="400">
            <template #default="scope">
              <div class="order-detail-list-item">
                <img :src="scope.row.imageUrl" alt="" style="width: 36px; height: 36px" />
                <div class="order-detail-list-item-product-info">
                  <div class="order-detail-list-item-product-info-product-name">
                    {{ scope.row.productName }}
                  </div>
                  <div class="order-detail-list-item-product-info-product-specification-name">
                    规格： {{ scope.row.productSpecificationName }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="支付价格" prop="price" />
          <el-table-column label="购买数量" prop="quantity" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane :name="2" label="订单记录"> 开发中 </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.order-detail-drawer {
  .order-detail-drawer-header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .order-detail-drawer-title {
      font-size: 14px;
    }
  }
}

.el-divider {
  margin: 0;
}
.order-type-and-number {
  padding-left: 20px;
  padding-top: 20px;
  display: flex;
  img {
    width: 60px;
    height: 60px;
  }
  .order-info-container {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    padding-top: 3px;
    div:nth-child(1) {
      span {
        font-size: 16px;
      }
      margin-bottom: 10px;
    }
    div:nth-child(2) {
      font-size: 13px;
      color: #606266;
    }
  }
}

.order-status {
  display: flex;
  padding: 20px;
  .order-status-item {
    display: flex;
    flex-direction: column;
    width: 180px;
    .order-status-item-key {
      font-size: 13px;
      color: #666;
    }
    .order-status-item-value {
      font-size: 14px;
      margin-top: 12px;
    }
  }
}

.order-detail-list-item {
  display: flex;
  align-items: center;
  .order-detail-list-item-product-info {
    margin-left: 10px;
    .order-detail-list-item-product-info-product-name {
      font-size: 12px;
      color: #303133;
    }
    .order-detail-list-item-product-info-product-specification-name {
      font-size: 12px;
      color: #aaa;
    }
  }
}
</style>
